<template>
    <div class="counter-component">
        <div class="counter-btn" @click="minus"> - </div>
        <div class="counter-show">
            <input type="text" v-model="number" @keyup="fixNumber">
        </div>
        <div class="counter-btn" @click="add"> + </div>
    </div>
    
</template>

<script>
    export default {
        props:{
            max:{
                type:Number,
                default:5
            },
            min:{
                type:Number,
                default:1
            }
        },
        data(){
            return {
                number: this.min
            }
        },
        // 监听值的变化
        watch:{
            number(){
                this.$emit('on-change',this.number)
            }
        },
        methods:{
            fixNumber(){
                let fix
                // 将字符串中非数字全部删除
                if (typeof this.number === 'string') {
                    fix = Number(this.number.repalce(/\D/g,''))
                } else {
                    fix = this.number
                }
                if (fix > this.max  || fix < this.min) {
                    fix = this.min
                }
                this.number = fix
            },
            minus(){
                if (this.number <= this.min) {
                    return
                }
                this.number --
            },
            add(){
                if (this.number >= this.max) {
                    return
                }
                this.number ++
            }
        }
    };
</script>

<style scouped>
.counter-component {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.counter-show {
  float: left;
}
.counter-show input {
  border: none;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  /*input比div少2px, 差别的原因是box-sizing,input默认的是box-sizing: border-box; */
  height: 23px;
  line-height: 23px;
  width: 30px;
  outline: none;
  text-indent: 4px;
}
.counter-btn {
  border: 1px solid #e3e3e3;
  float: left;
  height: 25px;
  line-height: 25px;
  width: 25px;
  text-align: center;
  cursor: pointer;
}
.counter-btn:hover {
  border-color: #4fc08d;
  background: #4fc08d;
  color: #fff;
}
</style>